<template>
    <view class="head">
        <view class="header-wrap" :style="{backgroundColor:bgColor,paddingTop: statusBarHeight}">
            <view class="index-header" :style="{height:naviBarHeight,lineHeight: naviBarHeight,backgroundColor:bgColor,color:color}">
				<block v-if="left">
					<view class="left" v-if="cityShow" @click="linkTo" data-url="">
						<view class="address h">{{city}}</view>
						<text class="iconfont icon-jiantou" style="font-size: 24rpx; margin-top: 8rpx;"></text>
					</view>
					
					<view class="back" v-if="back" @click="goBack">
						<text class="iconfont icon-fanhui"></text>
					</view>
				</block>
				<block v-if="centre">
					<view class="input-wrap" :style="{width: inputWidth,backgroundColor: inputBg}" v-if="input">
						<input type="text" 
							   placeholder="请输入搜索"
								disabled="true"/>
						<text class="iconfont icon-sousuo"></text>
					</view>
					<view class="head-title" :style="{width: inputWidth}" v-else>{{title}}</view>
				</block>
				<view class="rigth">
					<!-- 购物车 -->
					<view class="map-wrap"
					      v-if="shopCart"
					      @click="shopCartClick">
					    <text class="iconfont icon-gouwuche" style="font-size: 42rpx;" ></text>
					</view>
					<!-- 消息 -->
					<view class="map-wrap"
					      v-if="news"
					      @click="newsClick">
					    <text class="iconfont icon-xiaoxi" style="font-size: 36rpx;"></text>
					</view>
					<!-- 分享 -->
					<view class="map-wrap"
					      v-if="share"
					      @click="shareClik">
					    <text class="iconfont icon-Group-" style="font-size: 46rpx;" ></text>
					</view>
					<!-- 收藏 -->
					<view class="map-wrap"
					      v-if="collection"
					      @click="collectionClik">
						  <text v-show="!coll" class="iconfont icon-shoucang1" style="font-size: 46rpx;"></text>
					    <text v-show="coll" class="iconfont icon-wodeshoucang" style="font-size: 46rpx; color: #ff481c;"></text>
					</view>
					<view class="words">{{words}}</view>
				</view>
				<view class="left" v-if="rigthAddres" @click="chooseCity">
					<view class="address h">{{rigthAddres}}</view>
					<text class="iconfont icon-jiantou" style="font-size: 24rpx; margin-top: 8rpx;"></text>
				</view>
                
            </view>
        </view>
        <view :style="{height:titleHeight}"></view>

    </view>
</template>

<script>
	import Function from '@/common/function.js';
    export default {
        name: "IndexHeader",
        props: [
			'left', //左边是否显示
			'centre', //中间是否显示
            'back',  //是否显示箭头
			'cityShow', //是否显示城市
            'input',   //是否要搜索框
			'inputWidth', //搜索框的宽度
			'shopCart',  //购物车
			'news', //消息
            'rightIcon',
			'title',  //标题
			'bgColor', //背景颜色
			'color',  //head的字体颜色
			'rigthAddres', //右边地址
			'collection', //是否收藏
			'share', //分享
			'city', //城市
			'words', //右边文字
			'inputBg', //input背景颜色
        ],
        data () {
            return {
                value: '',
				titleHeight: '',
				naviBarHeight: '',
				statusBarHeight: '',
				coll: false
            }
        },
		
		created() {
			let systemInfo = uni.getStorageSync('systemInfo');
			//总高度
			this.titleHeight = systemInfo.titleHeight+'px';
			//导航栏搞得
			this.naviBarHeight = systemInfo.naviBarHeight+'px';
			// 状态栏高度
			this.statusBarHeight = systemInfo.statusBarHeight+'px'
			// console.log(systemInfo)
		},
        methods: {
            inputChange: function () {
                this.$emit('change',this.value)
            },
            rightClick: function () {
                this.$emit("rightClick")
            },
			chooseCity() {
				let data = {
					type: true,
					city: this.rigthAddres
				}
				this.$emit('chooseCity',data)
			},
			//消息
			newsClick() {
				console.log('点击的是消息按钮')
			},
			//购物车
			shopCartClick() {
				console.log('点击的是购物车按钮')
			},
			//分享
			shareClik() {
				console.log('点击的是分享按钮')
			},
			//收藏
			collectionClik() {
				this.coll = !this.coll
			},
			//返回
			goBack() {
				uni.navigateBack({
				    delta: 1,
					animationType: 'pop-out',
					animationDuration: 200
				});
			},
			linkTo(e) {
				let url = Function.getDataSet(e, 'url');
				Function.linkTo(url)
			},
        }
    }
</script>


<style>
	.status_bar {
		width: 100%;
	}
</style>

<style lang="scss" scoped>
	// @import "@/common/iconfont.css";
    $color-base: #ffffff; 
    $words-color-base: #333333;
    $words-color-light: #999999; 
    .header-wrap {
        width: 100%;
        position: fixed;
        top: 0;
        z-index: 99;
        .index-header {
            padding: 0 30rpx;
            background-color: $color-base;
            font-size: 28rpx;
            color: #333;
            display: flex;
            align-items: center;
            justify-content: space-between;
            .left{
				height: 100%;
				display: flex;
				align-items: center;
				justify-content: space-between;
				.address {
					width: 80rpx;
					line-height: 40rpx;
					text-align: center;
				    font-size: 26rpx;
					padding-right: 6rpx;
				}
			}
			.back{height: 100%; width: 80rpx;
				text{color: #000;font-size: 34rpx;}
			}
            .input-wrap {
				width: 400rpx;
                height: 60rpx;
                padding: 10rpx 30rpx 10rpx 100rpx;
                box-sizing: border-box;
                background-color: #ccc;
                border-radius: 50rpx;
                color: $words-color-base;
                position: relative;
                display:table;
                text {
                    position: absolute;
                    left: 54rpx;
                    top: 6rpx;
					line-height: 60rpx;
                    color: $words-color-light;
                    font-size: 30rpx;
                }
            }
			.head-title{
				text-align: center;font-size: 34rpx;font-weight: 700
			}
            .rigth{
				display: flex;
				align-items: center;
				justify-content: space-between;
			}
            .map-wrap {
				text-align: center;
                .iconfont {
                    font-size: 32rpx;
                    margin-right: 5rpx;
                }
                text {
                    font-size: 26rpx;
                }
            } 
			.words{
				color: #333333;font-size: 32rpx;letter-spacing: 4rpx;font-weight: bold;
			}
        }
    }
    
</style>
